<template>
  <div class="home-container">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>销售趋势</span>
            </div>
          </template>
          <div ref="salesChart" style="width: 100%; height: 300px;"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>库存分布</span>
            </div>
          </template>
          <div ref="stockChart" style="width: 100%; height: 300px;"></div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="12">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>订单统计</span>
            </div>
          </template>
          <div ref="orderChart" style="width: 100%; height: 300px;"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>用户活跃度</span>
            </div>
          </template>
          <div ref="userChart" style="width: 100%; height: 300px;"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts';

// 图表相关
const salesChart = ref(null);
const stockChart = ref(null);
const orderChart = ref(null);
const userChart = ref(null);

// 初始化图表
const initCharts = () => {
  // 销售趋势图
  const salesChartInstance = echarts.init(salesChart.value);
  salesChartInstance.setOption({
    title: {
      text: '近7天销售趋势'
    },
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'line',
      smooth: true
    }]
  });

  // 库存分布图
  const stockChartInstance = echarts.init(stockChart.value);
  stockChartInstance.setOption({
    title: {
      text: '库存分布'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [{
      type: 'pie',
      radius: '50%',
      data: [
        { value: 1048, name: '补气类' },
        { value: 735, name: '补血类' },
        { value: 580, name: '补阴类' },
        { value: 484, name: '补阳类' },
        { value: 300, name: '其他' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }]
  });

  // 订单统计图
  const orderChartInstance = echarts.init(orderChart.value);
  orderChartInstance.setOption({
    title: {
      text: '订单统计'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    xAxis: {
      type: 'category',
      data: ['待付款', '待发货', '已发货', '已完成', '已取消']
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      data: [120, 200, 150, 80, 70],
      type: 'bar'
    }]
  });

  // 用户活跃度图
  const userChartInstance = echarts.init(userChart.value);
  userChartInstance.setOption({
    title: {
      text: '用户活跃度'
    },
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      data: ['0-2点', '2-4点', '4-6点', '6-8点', '8-10点', '10-12点', '12-14点', '14-16点', '16-18点', '18-20点', '20-22点', '22-24点']
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      data: [120, 200, 150, 80, 70, 110, 130, 150, 200, 180, 160, 140],
      type: 'line',
      areaStyle: {}
    }]
  });

  // 监听窗口大小变化，调整图表大小
  window.addEventListener('resize', () => {
    salesChartInstance.resize();
    stockChartInstance.resize();
    orderChartInstance.resize();
    userChartInstance.resize();
  });
};

onMounted(() => {
  initCharts();
});
</script>

<style scoped>
.home-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.el-card {
  margin-bottom: 20px;
}

.el-card :deep(.el-card__header) {
  padding: 15px 20px;
  font-weight: bold;
}
</style>
